<template>
    <div class="menu-tree">
        <el-tree
                class="tree-border"
                :data="addressList"
                show-checkbox
                ref="tree"
                node-key="id"
                empty-text="暂无数据"
                :props="defaultProps"
                :default-checked-keys="list"
                :check-on-click-node="true"
        >
        </el-tree>
    </div>
</template>
<script>
    import XEUtils from "xe-utils";
    import address from "@/api/onlineRepair/address/index"
    export default {
        name:"RightAddress",
        props:["value"],
        data(){
            return{
                listVisible:false,
                defaultProps: {
                    children: "children",
                    label: "name"
                },
                addressList:[],
                selectList:[]
            }
        },
        created() {
            this.getAddressList()
        },
        computed:{
            list:{
                get(){
                    this.$nextTick(() => {
                        if (this.$refs["tree"]) this.$refs["tree"].setCheckedKeys(this.value)
                    })
                    return this.value
                },
                set(v){
                    this.$emit("input",v)
                }
            }
        },
        methods:{
            getAddressList(){
                address.getList().then(res=>{
                    this.addressList = XEUtils.toArrayTree(res.data,{strict: true, parentKey: 'parent', key: 'id', children: 'children'});
                })
            },
            getCheckedList() {
                return this.$refs["tree"].getCheckedKeys()
            }
        }
    }
</script>
